<template>
  <div class="top">
    <div class="topc_kl topc_kl">
      <img src="../../static/image/LOGO.png" alt="" class="top_logo" @click="loginClick">
      <div class="topc_right" v-if="tokensta">
        <img :src="userdata.headimg" alt="" @click="personal">
        <div class="topc_m">
          <h3 @click="personal">{{userdata.nickname}}</h3>
          <div>
            <span>LV.6</span>
          </div>
        </div>
        <span @click="out">退出</span>
      </div>
      <div class="topc_right1" v-else>
        <img src="../../static/image/k_24.png" alt="" class="login_kl">
        <ul>
          <li class="av" @click="login">登录</li>
          <li @click="register">注册</li>
        </ul>
      </div>
      <div class="top_kl">
        <div class="top_klj">
          <div @click="search" style="cursor: pointer"><span>搜索</span></div>
          <img src="../../static/image/b_0.png" alt="">
          <input type="text" placeholder="输入产品关键词" v-model="skeysearch"/>
        </div>
        <ul>
          <li v-for="(item,index) in centerList" @click="searchcheck(item.se_content)">{{item.se_content}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Header',
    data () {
      return {
        centerList: [],
        userdata: {},
        skeysearch: '',
        tokensta: false
      }
    },
    methods: {
      searchcheck: function (name) {
        this.skeysearch = name
      },
//      skeysearch: function () {
//        return this.skeysearch
//      },
      addsearchAjax: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            content: thisObj.skeysearch
          },
          slient: true,
          userinfo: false,
          url: 'Index/addSearchContent',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      search: function () {
        if (this.skeysearch !== '') {
          this.addsearchAjax()
        }
        var crumbs = []
        crumbs[0] = {
          title: '搜索',
          link: ''
        }
        if (this.skeysearch === '') {
          crumbs[1] = {
            title: '全部',
            link: ''
          }
        } else {
          crumbs[1] = {
            title: this.skeysearch,
            link: ''
          }
        }
        this.$store.commit('crumbs', crumbs)
        let routeUrl = this.$router.resolve({
          path: '/FuzzySearch',
          query: {
            cate: '搜索',
            skey: this.skeysearch
          }
        })
        window.open(routeUrl.href, '_self')
        if (this.$route.path === '/FuzzySearch') {
          this.$emit('goStart')
        }
      },
      personal: function () {
        this.$router.push('/Personal/PersonalInfo')
      },
      login: function () {
        this.$router.push('/Login/LoginByPass')
      },
      out: function () {
        let thisObj = this
        this.$chaos.clearAccessToken()
        this.$vux.toast.show({
          text: '退出成功',
          type: 'text',
          width: '180px',
          position: 'bottom'
        })
        this.tokensta = false
        setTimeout(function () {
          thisObj.$router.push('/Login/LoginByPass')
        }, 300)
      },
      register: function () {
        this.$router.push('/Login/LoginReg')
      },
      loginClick: function () {
        this.$router.push('/')
      },
      getSearchCenterList: function () {
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {
            limit: 3
          },
          slient: true,
          userinfo: false,
          url: 'Index/getSearchCenterList',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.centerList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      getUserData: function () {
        /* 获取用户信息 */
        let thisObj = this
        thisObj.$chaos.ajax({
          data: {},
          slient: true,
          userinfo: true,
          url: 'User/getUserData',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              thisObj.userdata = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      }
    },
    created () {
      let that = this
      if (decodeURI(that.$chaos.getQueryString('access_token'))) {
        that.$chaos.setAccessToken(decodeURI(that.$chaos.getQueryString('access_token')))
      }
      let token = this.$chaos.getAccessToken()
      this.getSearchCenterList()
      if (token) {
        this.tokensta = true
        this.getUserData()
      } else {
        this.tokensta = false
      }
    },
    activated () {
      let that = this
      if (decodeURI(that.$chaos.getQueryString('access_token'))) {
        that.$chaos.setAccessToken(decodeURI(that.$chaos.getQueryString('access_token')))
      }
      let token = this.$chaos.getAccessToken()
      this.getSearchCenterList()
      if (token) {
        this.tokensta = true
        this.getUserData()
      } else {
        this.tokensta = false
      }
    }
  }
</script>
<style scoped>
  .topc_right>img,.topc_m>h3{
    cursor: pointer;
  }
  .top_klj>input{
    font-size: 16px;
  }
  .topc_right1{
    float: right;
    width: 170px;
    margin-top: 99px;
  }
  .login_kl{
    width:30px;
    height:30px;
    float: left;
  }
  .topc_right1>ul{
    margin-left:50px;
    margin-top:3px;
    overflow: hidden;
  }
  .topc_right1>ul li{
    float: left;
    color: #fff;
    font-size: 16px;
    width:60px;
    position: relative;
    text-align: center;
    cursor: pointer;
  }
  .topc_right1>ul .av:after{
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background: #fff;
    position: absolute;
    top:5px;
    left:60px;
  }
.top_logo{
  cursor: pointer;
}
 .topc_right img{

 }
</style>
